<template>
    <div class="records">
        <div class="recordHeader">
            <div>{{roomName}}</div>
            <div class="menuIcon">
              <div class="opIcon" @click="minimize"><LineOutlined :style="{fontSize: '12px'}"/></div>
              <div class="opIcon close" @click="closeApp"><CloseOutlined :style="{fontSize: '12px'}"/></div>
            </div>
        </div>
        <div class="recordsListWrapper">
            <div class='recordsQuery'>
                <div class="queryWrapper">
                    <SearchOutlined />
                    <input placeholder="请输入聊天信息"/>
                </div>
                <div class="types">
                    <div>文件</div>
                    <div>图片与视频</div>
                    <div>链接</div>
                    <div>音乐与音频</div>
                </div>
            </div>
        </div>
        <List :list="ListRecords" loadPos="bottom" customClass="recordsList" @loadData="getUserRecords" :finished="finished">
            <template #item="{item}">
                <ChatRecordItemComponent v-if="item.sendName!==''" :item="item"/>
            </template>
        </List>
    </div>
</template>
<script lang="ts" setup>
// 工具库
import { onMounted, ref, computed } from 'vue'
import useChatStore from '@/stores/chatStore.ts'
import { useRoute } from 'vue-router'
// 组件库
import {
  LineOutlined,
  CloseOutlined,
  SearchOutlined
} from '@ant-design/icons-vue'
import List from '@/components/custom/List/index.vue'
import ChatRecordItemComponent from '../components/records/ChatRecordItemComponent.vue';
import { closeChatRecordWin, getChatRecordsByRoomId } from '@/utils/Electron.ts'
// 属性库
const ListRecords = ref<Array<any>>([])
const roomName = ref<string>('')
const roomId = ref<string>('')
const loading = ref<boolean>(false)
const finished = ref<boolean>(false)
const minimize = () => {
}
const closeApp = () => {
    closeChatRecordWin()
}
// 获取当前聊天人的聊天记录
const getUserRecords = () => {
    getChatRecordsByRoomId(roomId.value, ListRecords.value.length===0 ? 0 : ListRecords.value.length-1, 20).then((res: any)=> {
        if (res.success && res.data.list.length > 0) {
            const list = res.data.list
            ListRecords.value = [...ListRecords.value, ...list]
            finished.value = !res.data.next
            loading.value = false
        }
    })
}

onMounted(()=> {
    window.api.on('main-render-chat-records', (event: any, msg: any) => {
        ListRecords.value = []
        roomId.value = msg.roomId
        roomName.value = msg.roomName
        getUserRecords()
    }); 
})
</script>
<style lang="less" scoped>
.records {
    background-color: white;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc;
    -webkit-app-region: no-drag;
    .recordHeader {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        height: 35px;
        padding: 0 2%;
        align-items: center;
        font-size: 14px;
        background-color: #f5f5f5;
        -webkit-app-region: drag;
        .menuIcon {
            display: flex;
            gap: 10px;
            -webkit-app-region: no-drag;
            position: absolute;
            right: 5px;
            top: 5px;
            .opIcon{
                width: 30px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                cursor: pointer;
                &:hover {
                    background-color: #ccc;
                }
                &.close:hover {
                    background-color: rgba(255, 0, 0, 0.473) !important;
                    color: white;
                }
            }
        }
    }
    .recordsListWrapper {
        background-color: #f5f5f5;
        padding-top: 10px;
        .queryWrapper {
            background-color: white;
            width: 90%;
            padding: 10px;
            margin: 0 auto;
            border-radius: 7px;
            border: 1px solid #e4e4e4;
            display: flex;
            align-items: center;
            gap: 10px;
            input {
                flex: 1;
                border: none;
                outline: none;
            }
        }
        .types {
            width: 93%;
            margin: 0 auto;
            display: flex;
            padding-bottom: 10px;
            margin-top: 10px;
            font-size: 14px;
            color: #3c5690;
            gap: 20px;
        }
    }
    .recordsList {
        flex: 1;
        overflow-y: scroll;
    }
}
</style>